<template>
  <div class="Fontsize">
    <div class="fontcontent" :style="{'background-color':Style.backgroundColor,color:Style.color}">
      <div class="first-div" style="border-bottom: none">
        <div class="div" :style="{color:Style.color}"><i class="iconfont icon-yuedubeijing"></i>阅读背景</div>
        <div class="div colornth">
          <p class="icons iconscolor1 " @click.stop='options(1)' :style="{borderColor:Style.color}"></p>
          <!--<p class="icons iconscolor2 " @click.stop="modecolor=2"></p>-->
          <p class="icons iconscolor2 " @click.stop='options(3)' :style="{borderColor:Style.color}"></p>
          <div class="icons iconscolor3" @click.stop="options(2)" :style="{borderColor:Style.color}">
            <i class="iconfont icon-yejianmoshi"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "index",
    data: function () {
      return {
        Style:this.Styles
      }
    },
    props: ['Styles'],
    mounted: function () {
    },
    methods: {
      options: function (num) {
        if (num === 1) {
          this.Style = {
            mode: num,
          }
        } else if (num === 2) {
          this.Style = {
            backgroundColor: '#25252b',
            color: '#fff',
            iconBgColor: '#25252b',
            mode: num,
            opacity: 0.4,
            iconColor:'#fff',
            playBtnColor:'#24242a',
            borderColor: 'rgba(255,255,255,.4)',
            borderColors: 'rgba(255,255,255,.05)',
            btnStyle:{
              backgroundColor: '#fff',
              width: '85%',
              height: '4.5rem',
              color: '#333',
              opacity: 1,
            }
          }
        } else if (num === 3) {
          this.Style = {
            backgroundColor: '#faf6eb',
            color: '#333',
            iconBgColor: '#faf6eb',
            mode: num,
            opacity: 0.4,
            iconColor:'#66440a',
            playBtnColor:'#66440a',
            borderColor: '#333',
            borderColors: 'rgba(255,255,255,.05)',
            btnStyle:{
              backgroundColor: '#66440a',
              width: '85%',
              height: '4.5rem',
              color: '#fff',
              opacity: 1,
              boxShadow: '0 10px 24px 0 rgba(102, 68, 10, 0.3)'
            }
          }
        }
        this.$emit('Color', this.Style)
      },
    }
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
